<template>
    <div class="app-container">
        <el-form class="formBox formBox1" :model="queryParams" ref="queryForm" size="small" :inline="true"
            v-show="showSearch" label-width="68px">
            <div class="planClassifyDiv">
                <el-radio-group v-model="queryParams.planClassifyId" size="mini" @input="changeRadioEvent">
                    <el-radio-button v-for="dict in dict.type.plan_classify_type" :key="dict.value" :name="dict.value"
                        :label="dict.value">{{ dict.label }}</el-radio-button>

                </el-radio-group>
            </div>
            <el-form-item label="医院" prop="hospital" clearable>
                <department :isHospital="true" :isdepat="true" @refreshData="refreshData" deptWidth="200px"
                    ref="department">
                </department>
            </el-form-item>
            <el-form-item label="治疗项目" v-if="queryParams.planClassifyId == 1">
                <el-select v-model="queryParams.treatmentId" filterable placeholder="请选择治疗项目" clearable
                    style="width: 160px">
                    <el-option v-for="item in singlePlanList" :key="item.planId" :label="item.medicalEquipment"
                        :value="item.planId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="专病名称" v-if="queryParams.planClassifyId == 0">
                <el-select v-model="queryParams.diseaseClassifyName" filterable placeholder="请选择专病名称" clearable
                    style="width:160px">
                    <el-option v-for="item in classifyList" :key="item.diseaseClassifyId"
                        :label="item.diseaseClassifyName" :value="item.diseaseClassifyName" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                <el-button icon="el-icon-plus" type="success" size="mini" @click="handleAdd">新增</el-button>
            </el-form-item>
        </el-form>
        <div class="formBox searchForm" ref="statisticalTable" style="margin-bottom:0px!important;"
            :style="{ height: statisticalTableH }">
            <el-row :gutter="10" class="mb8">
                <right-toolbar :showSearch.sync="showSearch" @queryTable="handleQuery"></right-toolbar>
            </el-row>
            <div class="formBox-containers" v-if="tableLists && tableLists.length > 0">
                <el-card class="box-card" v-for="(items, indexs) in tableLists" :key="indexs">
                    <el-tag type="success" size="medium">{{ items.diseaseName }}随访计划</el-tag>
                    <el-button size="mini" @click="handleDelete(items)" style="margin-left:10px">删除</el-button>

                    <el-button type="danger" size="mini" @click="getfollowUpStatusQuery(2, items)"
                        v-if="items.status == 1">停用</el-button>
                    <el-button type="success" size="mini" @click="getfollowUpStatusQuery(1, items)"
                        v-else>启用</el-button>
                    <div class="cardSteps">
                        <div class="cardSteps-item" v-for="(item, index) in items.sysFollowUpDetailedList" :key="index">
                            <div class="second-content">
                                <div v-if="index % 2 != 0">
                                    <div class="cardSteps-item-title">{{ getTime(item.status) }}{{ item.dayNum ?
            item.dayNum
            : '-' }}天</div>

                                    <div class="cardSteps-item-decript">{{ matchDict("sys_follow_type", item.way)
                                        }}</div>
                                    <div class="cardSteps-item-decript" v-if="item.formId">:{{ item.formName
                                        }}</div>
                                </div>


                            </div>
                            <div class="first-content" @click="updateInfo(index, items, 1)">
                                <div class="cardSteps-item-line"></div>
                                <div class="cardSteps-item-div" :class="'color' + item.way">{{ index + 1 }}</div>
                                <div class="cardSteps-item-line"></div>
                            </div>
                            <div class="second-content">
                                <div v-if="index % 2 == 0">
                                    <div class="cardSteps-item-title">{{ getTime(item.status) }}{{ item.dayNum ?
            item.dayNum
            : '-' }}天</div>

                                    <div class="cardSteps-item-decript">{{ matchDict("sys_follow_type", item.way)
                                        }}</div>
                                    <div class="cardSteps-item-decript" v-if="item.formId">:{{ item.formName
                                        }}</div>
                                </div>

                            </div>

                        </div>
                    </div>

                </el-card>
            </div>
            <div v-else>
                <img class="parent-img" src="@/assets/404_images/404_cloud.png" alt="404">
                <div class="parent-text"> 暂无随访计划！</div>
            </div>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>





        <!-- 添加或修改对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body :before-close="cancel"
            class="nopaddingDailog" :close-on-click-modal="false" v-dialogDrag @closed="getList">
            <el-form ref="form" :model="form" :rules="rules" label-width="78px" label-position="left" size="small"
                class="searchForm">
                <div class="formTop">
                    <el-form-item label="随访分类" prop="planClassifyId">
                        <el-radio-group v-model="form.planClassifyId">
                            <el-radio v-for="dict in dict.type.plan_classify_type" :key="dict.value"
                                :label="dict.value">{{ dict.label }}</el-radio>
                            <!-- <el-radio-button v-for="dict in dict.type.plan_classify_type" :key="dict.value" 
                            :label="dict.value">{{ dict.label }}</el-radio-button> -->
                        </el-radio-group>

                    </el-form-item>
                    <div class="planItemFormItem">
                        <!-- 专病随访 -->
                        <el-form-item label="适用专病" prop="diseaseId" v-if="form.planClassifyId == 0" style="width:50%">
                            <el-select v-model="form.diseaseId" placeholder="适用专病" clearable filterable
                                style="width:90%" :disabled="inputDisabled ? true : false" @change="seletDisease">
                                <el-option v-for="dict in classifyList" :key="dict.diseaseClassifyId"
                                    :label="dict.diseaseClassifyName" :value="dict.diseaseClassifyId" />
                            </el-select>
                        </el-form-item>
                        <!-- 治疗随访 -->
                        <el-form-item label="治疗项目" prop="planTreatId" v-if="form.planClassifyId == 1" style="width:50%">
                            <el-select v-model="form.planTreatId" filterable placeholder="请选择治疗项目" clearable
                                style="width:90%">
                                <el-option v-for="item in singlePlanList" :key="item.planId"
                                    :label="item.medicalEquipment" :value="item.planId"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="使用科室" prop="deptId" v-if="open" style="width:50%">
                            <department :isAdd="true" @changedepatData="changedepatData" :HospitalId="form.hospitalId"
                                :deptIds="form.deptId" :isdisabled="inputDisabled ? true : false" deptWidth="90%">
                            </department>
                        </el-form-item>
                    </div>
                </div>


                <div class="planItemContainers">
                    <div v-for="(item, index) in plansArr" :key="index" class="planItem">
                        <el-form-item :label="'随访' + (index + 1)" label-width="60px">

                        </el-form-item>
                        <el-form-item label="治疗状态" label-width="70px">
                            <el-select v-model="item.status" placeholder="治疗状态" clearable filterable style="width:140px"
                                :disabled="((seletedIndex == index && inputDisabled) || (item.id == undefined || item.id == '' || item.id == null)) ? false : true">
                                <el-option v-for="dict in statusTypes" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" label-width="0" style="margin-left:10px;">
                            <span>第 </span>
                            <el-input v-model="item.dayNum" placeholder="请输入" clearable style="width:60px"
                                @input="item.dayNum = item.dayNum.replace(/^(0+)|[^\d]+/g, '')"
                                :disabled="((seletedIndex == index && inputDisabled) || (item.id == undefined || item.id == '' || item.id == null)) ? false : true" />
                            <span> 天</span>
                        </el-form-item>
                        <el-form-item :label="'方式'" label-width="50px" style="margin-left:10px;">
                            <el-select v-model="item.way" placeholder="方式" clearable filterable style="width:80px"
                                :disabled="((seletedIndex == index && inputDisabled) || (item.id == undefined || item.id == '' || item.id == null)) ? false : true">
                                <el-option v-for="dict in dict.type.sys_follow_type" :key="dict.value"
                                    :label="dict.label" :value="dict.value" />
                            </el-select>
                        </el-form-item>
                        <!-- form.diseaseIds -->
                        <!-- <el-form-item label="随访角色" style="margin-left:10px;">
                            <el-select v-model="item.roleIds" multiple placeholder="随访角色" clearable filterable
                                :disabled="((seletedIndex == index && inputDisabled) || (item.id == undefined || item.id == '' || item.id == null)) ? false : true"
                                :collapse-tags="true" style="width:100%">
                                <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName"
                                    :value="item.roleId" />
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="问卷表名" style="margin-left:10px;" v-if="item.way == 2">
                            <el-select v-model="item.formId" placeholder="问卷表名" clearable filterable style="width:140px"
                                :disabled="((seletedIndex == index && inputDisabled) || (item.id == undefined || item.id == '' || item.id == null)) ? false : true"
                                @change="selectForm(item, index)">
                                <el-option v-for="dict in formList" :key="dict.formId" :label="dict.formName"
                                    :value="dict.formId" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="随访内容" style="margin-left:10px;" v-else>
                            <el-input v-model="item.planContent" clearable placeholder="随访内容" style="max-width:200px" />
                        </el-form-item>
                        <el-form-item label="" label-width="0px">
                            <el-button @click="delplansArr(item, index)" style="margin-left:10px;"
                                v-if="plansArr.length != 1 && ((seletedIndex == index && inputDisabled) || (item.id == undefined || item.id == '' || item.id == null))">删除</el-button>

                            <el-button type="success" style="margin-left:5px;"
                                @click="comfirmplansArrDetail(item, item.followUpId)"
                                v-if="plansArr.length != 1 && (seletedIndex == index && inputDisabled && item.id)">确认修改</el-button>
                            <el-button type="success" style="margin-left:5px;"
                                @click="comfirmplansArrDetail(item, item.followUpId)"
                                v-if="plansArr.length != 1 && ((inputDisabled) && (item.id == undefined || item.id == '' || item.id == null))">确认新增</el-button>
                            <el-button type="primary" style="margin-left:5px;" @click="addplansArr"
                                v-if="plansArr.length == getIndex(index)">添加</el-button>
                        </el-form-item>
                    </div>
                </div>
                <!-- v-if="(seletedIndex==index&&inputDisabled)||!inputDisabled" -->


            </el-form>
            <div class="formBox-containers" v-if="plansArr && plansArr.length > 0 && plansArr[0].status"
                style="margin-top:5px;">
                <el-card class="box-card">
                    <div class="cardSteps">
                        <div class="cardSteps-item" v-for="(item, index) in plansArr" :key="index" v-if="item.status"
                            :class="seletedIndex == index && inputDisabled ? 'active' : ''">
                            <div class="second-content">
                                <div v-if="index % 2 != 0">
                                    <div class="cardSteps-item-title">状态：{{ getTime(item.status) }}</div>

                                    <div class="cardSteps-item-decriptType">方式：{{ matchDict("sys_follow_type", item.way)
                                        }}</div>
                                    <div class="cardSteps-item-decript text_overflow_2" v-if="item.formId">{{
            item.formName }}</div>
                                    <div class="cardSteps-item-decript text_overflow_2" v-else>内容：  
                                        <el-tooltip :content="item.planContent" placement="top">
                                            <span> {{ item.planContent }}</span>
                                        </el-tooltip>
                                    </div>
                                </div>
                            </div>
                            <div class="first-content" @click="updateInfo(index, form, 2)">
                                <div class="cardSteps-item-line"></div>
                                <div class="cardSteps-item-div" :class="'color' + item.way">{{ item.dayNum ?
            item.dayNum :
            ' _ ' }}天</div>
                                <div class="cardSteps-item-line"></div>
                            </div>
                            <div class="second-content">
                                <div v-if="index % 2 == 0">
                                    <div class="cardSteps-item-title">状态：{{ getTime(item.status) }}</div>

                                    <div class="cardSteps-item-decriptType">方式：{{ matchDict("sys_follow_type", item.way)
                                        }}</div>
                                    <div class="cardSteps-item-decript text_overflow_2" v-if="item.formId">{{
                                        item.formName }}</div>
                                    <div class="cardSteps-item-decript text_overflow_2" v-else>内容：
                                        <el-tooltip :content="item.planContent" placement="top">
                                           <span> {{ item.planContent }}</span>
                                        </el-tooltip>
                                       
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </el-card>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="submitForm" v-if="!inputDisabled">提 交</el-button>
                <el-button @click="cancel" v-if="inputDisabled">关闭</el-button>
                <el-button @click="cancel" v-if="!inputDisabled">返 回</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
    listForm,
} from "@/api/system/form";
import {
    listRole,
} from "@/api/system/role";
import {
    listClassify,
} from "@/api/system/classify";
import {
    listPlan,
} from "@/api/system/plan";
import { deptNameList } from "@/api/system/dept";
import department from "@/views/components/department/index.vue";
import { addfollowUp, getfollowUp, updatefollowUp, getfollowUpStatus, listfollowUp, delfollowUp, followUpDetailedList, delfollowUpDetail, updatefollowUpdetailed, addfollowUpdetailed } from "@/api/diseaseCourse/followUp";
export default {
    name: "doctorSum",
    dicts: [
        'sys_follow_type',
        'plan_classify_type'
    ],
    components: { department },
    data() {
        return {
            statisticalTableH: undefined,
            // 角色选项
            roleOptions: [],
            statusTypes: [
                {
                    value: "3",
                    label: '治疗中'
                },
                {
                    value: "4",
                    label: '治疗结束'
                }
            ],
            classifyList: [],
            roles: [],
            plansArr: [
                {
                    id: undefined,
                    followUpId: undefined,
                    status: '',
                    dayNum: '',
                    way: '',
                    roleIds: '',//随访角色
                    formId: '',
                    formName: '',
                    planContent: ''
                }
            ],
            tableLists: [


            ],
            loading: true,

            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,

            // 日期范围
            dateRange: [],
            title: '',
            open: false,
            // 表单参数
            // form: {},
            form: {
                diseaseId: '',//专病类型
                planTreatId: '',//治疗项目
                planClassifyId: "0",//专病随访、治疗随访、通用随访
                diseaseName: "",
                followUpId: undefined,
                hospitalId: undefined,
                deptId: undefined,
                sysFollowUpDetailedList: [//特征名称、颜色集合
                    {
                        id: undefined,
                        followUpId: undefined,
                        status: '',
                        dayNum: '',
                        way: '',
                        roleIds: '',//随访角色
                        formId: '',
                        formName: '',
                    }
                ]
            },
            inputDisabled: false,//是否是修改
            seletedIndex: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                diseaseClassifyName: undefined,
                planClassifyId: 0
            },
            //随访表单list
            formList: [],
            deptNameLists: [],
            singlePlanList: [],
            // 表单校验
            rules: {
                planClassifyId: [
                    {
                        required: true,
                        message: "随访分类必选",
                        trigger: "blur",
                    },
                ],
                diseaseId: [
                    {
                        required: true,
                        message: "专病必选",
                        trigger: "blur",
                    },
                ],
                planTreatId: [
                    {
                        required: true,
                        message: "治疗项目必选",
                        trigger: "blur",
                    },
                ],
                deptId: [
                    {
                        required: true,
                        message: "科室必选",
                        trigger: "blur",
                    },
                ]

            },


        };
    },
    watch: {
        showSearch() {
            this.$nextTick(() => {
                this.changeHeight()
            }, 1000)

        }
    },
    async created() {
        this.getClassifyList();
        this.getSinglePlanList()

    },
    computed: {
        ...mapGetters(["dept", "hospital"]),
    },
    mounted() {
        this.changeHeight()
    },
    methods: {
        changeRadioEvent(e) {
            console.log(e)
            this.$nextTick(() => {
                this.changeHeight()
            }, 1000)
        },
        /** 治疗项目 */
        getSinglePlanList() {
            listPlan({
                pageNum: 1,
                pageSize: 9999,
                status: 0,
                hospitalId: this.queryParams.hospitalId,
                planCategoryId: "2"
            }).then(
                (response) => {
                    this.singlePlanList = response.rows;
                }
            );
        },
        changeHeight() {
            if (this.$refs.statisticalTable) {
                const statisticalTableObj = this.$refs.statisticalTable.getBoundingClientRect();
                let h = statisticalTableObj.top + 20
                this.statisticalTableH = 'calc(100vh - ' + h + 'px)'
            } else {
                this.statisticalTableH = '500px'
            }
        },
        getfollowUpStatusQuery(type, items) {
            this.$modal
                .confirm(
                    '是否确认' + (type == 1 ? "启用" : "停用") + '"' +
                    items.diseaseName +
                    '"专病的随访计划？'
                )
                .then(function () {
                    return getfollowUpStatus(items.followUpId, type);
                })
                .then(() => {

                    this.getList();
                    this.$modal.msgSuccess((type == 1 ? "启用" : "停用") + "成功");
                })
                .catch(() => { });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const title = row.diseaseName
            const followUpId = row.followUpId;
            this.$modal
                .confirm(
                    '是否确认删除名称为"' +
                    title +
                    '"专病的随访计划？'
                )
                .then(function () {
                    return delfollowUp(followUpId);
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => { });
        },

        seletDisease() {
            this.form.diseaseName = this.getFormName(this.form.diseaseId, 2)
        },
        selectForm(item, index) {//表单选择
            console.log(item)
            console.log(index)
            console.log("-----s")
            item.formName = this.getFormName(item.formId, 1)
        },
        getFormName(id, type) {//type=1表单  2 专病
            let textValue = "";
            if (type == 1) {
                this.formList.forEach((item) => {
                    if (item.formId == id) {
                        textValue = item.formName;
                    }
                });
            } else if (type == 2) {
                this.classifyList.forEach((item) => {
                    if (item.diseaseClassifyId == id) {
                        textValue = item.diseaseClassifyName;
                    }
                });
            }

            return textValue;
        },
        refreshData(data) {
            this.queryParams.pageNum = 1;
            this.queryParams.hospitalId = data.hospitalId
            this.queryParams.deptId = data.deptId
            this.getdeptNameList();
        },
        changedepatData(data) {
            console.log(data)
            console.log("999")
            if (!this.inputDisabled) {
                if (data && data.length > 0) {
                    this.form.deptId = data[0].deptId
                    this.form.hospitalId = data[0].parentId
                } else {
                    this.form.deptId = undefined
                    this.form.hospitalId = undefined
                }
                //执行
                this.roles = []
                this.plansArr = [
                    {
                        id: undefined,
                        followUpId: undefined,
                        status: '',
                        dayNum: '',
                        way: '',
                        roleIds: '',//随访角色
                        formId: '',
                        formName: '',
                    }
                ]

                this.getFormList()
                this.getRole()
            }
            ;
        },
        // 回显医院及门诊
        getdeptNameList() {
            deptNameList().then((response) => {
                this.deptNameLists = response.data;
                this.getList();
            });
        },
        /** 查询随访表单列表 */
        getFormList() {
            listForm(
                this.addDateRange({
                    pageNum: 1,
                    formType: "3",
                    hospitalId: this.form.hospitalId,
                    pageSize: 9999,
                    status: '0',
                })
            ).then((response) => {
                let data = response.rows;
                console.log(data)
                this.formList = data
            });
        },
        matchDict: function (key, id) {
            let _this = this;
            const result = _this.dict.type[key];
            let textValue = "";
            result.forEach((item) => {
                if (item.raw.dictValue == id) {
                    textValue = item.raw.dictLabel;
                }
            });
            return textValue;
        },
        updateInfo(index, row, type) {
            console.log(index)
            this.seletedIndex = index
            if (type == 2) {
                return false
            }

            let followUpId = row.followUpId
            this.reset();
            this.inputDisabled = true
            getfollowUp(followUpId).then((response) => {
                if (response.code == 200) {
                    let data = response.data;
                    this.form = data

                    this.getfollowUpDetailedList(followUpId)

                }
            });


        },
        //查询获取随访计划详情列表  followUpId
        getfollowUpDetailedList(followUpId) {
            let that = this
            followUpDetailedList({
                followUpId: followUpId
            }).then((response) => {
                if (response.code == 200) {
                    let data = response.rows;
                    console.log(data) //roleIds
                    data.forEach(item => {
                        item.roleIds = that.getRolesId(item.roles)
                    })
                    this.plansArr = data
                    console.log(data)
                    this.getFormList()
                    this.getRole();
                    this.title = "修改随访计划";
                    this.open = true;
                    // this.form = data
                    // this.plansArr = data.sysFollowUpDetailedList
                    // this.getFormList()
                    // this.getRole();
                    // this.title = "修改随访计划";
                    // this.open = true;
                }
            });
        },

        getRole() {
            let params = {
                deptId: this.form.hospitalId
            }
            listRole(params).then((response) => {
                this.roleOptions = response.rows;
            });
        },
        getTime(status) {
            let text = ''
            this.statusTypes.forEach(function (ele) {
                if (status == ele.value) {
                    text = ele.label
                }
            })
            return text
        },

        // 表单重置
        reset() {
            this.form = {
                diseaseId: '',//专病类型
                diseaseName: "",
                planClassifyId: "0",//专病随访、治疗随访、通用随访
                followUpId: undefined,
                hospitalId: undefined,
                deptId: undefined,
                sysFollowUpDetailedList: [//特征名称、颜色集合
                    {
                        id: undefined,
                        followUpId: undefined,
                        status: '',
                        dayNum: '',
                        way: '',
                        roleIds: '',//随访角色
                        formId: '',
                        formName: '',
                    }
                ]
            },
                this.roles = []
            this.plansArr = [
                {
                    id: undefined,
                    followUpId: undefined,
                    status: '',
                    dayNum: '',
                    way: '',
                    roleIds: '',//随访角色
                    formId: '',
                    formName: '',
                }
            ]
            this.resetForm("form");
        },
        addplansArr() {
            let obj = {
                id: undefined,
                followUpId: this.inputDisabled ? this.form.followUpId : undefined,
                status: '',
                dayNum: '',
                way: '',
                roleIds: '',//随访角色
                formId: '',
                formName: '',
            }
            this.plansArr.push(obj)
        },
        delplansArr(item, index) {

            if (item.id) {
                const ids = item.id;
                this.$modal
                    .confirm(
                        '是否确认删除此项随访明细？'
                    )
                    .then(function () {
                        return delfollowUpDetail(ids);
                    })
                    .then(() => {
                        this.plansArr.splice(index, 1)
                        this.$modal.msgSuccess("删除成功");
                    })
                    .catch(() => { });
            } else {
                this.plansArr.splice(index, 1)
            }

        },
        getIndex(index) {
            return index + 1;
        },
        /** 新增按钮操作 */
        handleAdd() {

            this.reset();
            this.inputDisabled = false
            this.open = true;
            this.title = "新增随访计划";
        },
        comfirmplansArrDetail(ele, followUpId) {
            if (ele.status == null || ele.status == undefined || ele.status == '') {
                throw new Error("随访时刻不能为空！");

            }
            if (ele.dayNum == null || ele.dayNum == undefined || ele.dayNum == '') {
                throw new Error("随访天数不能为空");

            }
            if (ele.way == null || ele.way == undefined || ele.way == '') {
                throw new Error("随访方式不能为空");

            }
            if (ele.roleIds == null || ele.roleIds == undefined || ele.roleIds == '') {
                throw new Error("随访角色不能为空");

            }
            if (ele.way == 2 && (ele.formId == null || ele.formId == undefined || ele.formId == '')) {
                throw new Error("问卷表单不能为空");

            }
            if (ele.id != undefined) { //修改
                updatefollowUpdetailed(ele).then((response) => {
                    if (response.code == 200) {
                        this.$modal.msgSuccess("修改随访计划时刻成功~");
                        this.getfollowUpDetailedList(followUpId)
                    }
                });
            } else {//新增
                addfollowUpdetailed(ele).then((response) => {
                    if (response.code == 200) {
                        this.$modal.msgSuccess("新增随访计划时刻成功~");
                        this.getfollowUpDetailedList(followUpId)
                    }
                });

            }
        },
        submitForm: function () {
            // let paramsArr = []
            this.$refs["form"].validate((valid) => {
                let that = this
                if (valid) {

                    try {
                        that.plansArr.forEach(function (ele) {
                            if (ele.status == null || ele.status == undefined || ele.status == '') {
                                throw new Error("随访时刻不能为空！");

                            }
                            if (ele.dayNum == null || ele.dayNum == undefined || ele.dayNum == '') {
                                throw new Error("随访天数不能为空");

                            }
                            if (ele.way == null || ele.way == undefined || ele.way == '') {
                                throw new Error("随访方式不能为空");

                            }
                            // if (ele.roleIds == null || ele.roleIds == undefined || ele.roleIds == '') {
                            //     throw new Error("随访角色不能为空");

                            // }
                            if (ele.way == 2 && (ele.formId == null || ele.formId == undefined || ele.formId == '')) {
                                throw new Error("问卷表单不能为空");

                            }
                            // let obj={}
                            // obj.roleIds = ele.roleIds.join(',')
                            // obj.id=ele.id
                            // obj.status=ele.status
                            // obj.dayNum=Number(ele.dayNum)
                            // obj.way=ele.way
                            // obj.formId=ele.formId
                            // obj.formName=ele.formName
                            // paramsArr.push(obj)
                        });
                    } catch (e) {
                        this.$message.warning(e.message)
                        return
                    };



                    console.log(that.plansArr)
                    this.form.sysFollowUpDetailedList = that.plansArr
                    console.log("val---")
                    console.log(this.form)
                    if (this.form.followUpId != undefined) { //修改
                        updatefollowUp(this.form).then((response) => {
                            if (response.code == 200) {
                                this.$modal.msgSuccess("修改随访计划成功");
                                this.open = false;
                                this.getList();
                            }
                        });
                    } else {//新增
                        addfollowUp(this.form).then((response) => {
                            if (response.code == 200) {
                                this.$modal.msgSuccess("新增随访计划成功");
                                this.open = false;
                                this.getList();
                            }
                        });

                    }
                }
            });
        },
        // 获取专病列表
        getClassifyList() {
            listClassify(
                {
                    pageNum: 1,
                    pageSize: 9999,
                    status: 0
                }
            ).then((response) => {
                this.classifyList = response.rows;
            });
        },
        getRolesId(RolesData) {
            let roleID = []
            if (RolesData && RolesData.length > 0) {
                RolesData.forEach(function (ele, index) {
                    roleID.push(ele.roleId)
                })
            }
            return roleID
        },
        getRoles(Roles) {
            let roleHtml = ''
            if (Roles && Roles.length > 0) {
                Roles.forEach(function (ele, index) {
                    if (index != Roles.length - 1) {
                        roleHtml += ele.roleName + '、'
                    } else {
                        roleHtml += ele.roleName
                    }
                })
            }
            return roleHtml
        },
        // 真实序号计算（计算分页影响）
        // getIndex(index) {
        //     return (this.queryParams.pageNum - 1) * this.queryParams.pageNum + index + 1;
        // },
        /** 查询设备列表 */
        getList() {
            let that = this
            that.loading = true;
            let params = {
                startTime: that.dateRange[0],
                endTime: that.dateRange[1],
                ...that.queryParams
            }
            listfollowUp(params).then((response) => {
                if (response.code == 200) {
                    let data = response.rows;
                    console.log(data)
                    that.tableLists = data
                    that.total = response.total
                }

                that.loading = false;
            });


        },
        // 取消按钮
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },



    },
};
</script>
<style scoped lang="scss">
.text_overflow_2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 40rpx;
}

.planItemFormItem {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.planItemContainers {
    .planItem {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding-top: 5px;
        border-bottom: 1px solid #eee;
    }

    ::v-deep .el-input__inner {
        padding: 0 10px !important;
        padding-right: 0px !important;
    }
}


.planClassifyDiv {
    margin-bottom: 8px;
}

.parent-img {
    width: 200px;
    height: 200px;
    display: block;
    margin: 10px auto;
}

.parent-text {
    color: #999;
    text-align: center;
}

.cardSteps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    overflow-y: auto;

    .cardSteps-item {
        position: relative;

    }

    .cardSteps-item.active {
        color: red !important;
        font-weight: bold;

        .cardSteps-item-decript {
            color: red !important;
        }

        .cardSteps-item-div {
            border: 2px solid red;
            box-shadow: 0 0 6px red;
        }
    }

    .second-content {
        height:75px;
        padding-left: 40px;
        width: 160px;
        cursor: pointer;
        position: relative;
        // display: flex;
        // align-items: center;
        // justify-content: center;


        .cardSteps-item-title {
            font-size: 13px;
            font-weight: 900;
        }

        .cardSteps-item-decript {
            margin-top: 2px;
            font-size: 13px;
            line-height: 18px;
            color: #999;
        }

        .cardSteps-item-decriptType {
            margin-top: 2px;
            font-size: 12px;
            line-height: 18px;
            color: #333;
        }
    }

    .first-content {
        display: flex;
        align-items: center;
        cursor: pointer;

        .cardSteps-item-line {
            width: 60px;
            height: 2px;
            background: rgb(63, 62, 62);
        }

        .cardSteps-item-div {
            min-width: 40px;
            padding: 0 8px;
            height: 40px;
            background: rgb(206, 106, 106);
            border-radius: 20px;
            text-align: center;
            line-height: 40px;
            align-items: center;
            color: #fff;
            font-size: 13px;
            margin: 0 5px;
        }

        .cardSteps-item-div.color1 {
            background: #67C23A;
        }

        .cardSteps-item-div.color2 {
            background: #E6A23C;
        }

        .cardSteps-item-div.color3 {
            background: #af1a82;
        }

        .cardSteps-item-div.color4 {
            background: #09acdd;
        }

        .cardSteps-item-div.color5 {
            background: #93dd09;
        }

        .cardSteps-item-div.color6 {
            background: #2cdd09;
        }

        .cardSteps-item-div.color7 {
            background: #0942dd;
        }

        .cardSteps-item-div.color8 {
            background: #b6dd09;
        }
    }
}
</style>
